<!--
	学生的主页
-->
<template>
<!-- 最外面容器 start -->
<div class="chapter-box">
	<!-- 章节目录 start -->
	<div class="chapter">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>章节目录</span>
				</div>
			</template>
			<div class="chapter-info-box">
				<el-timeline>
					<!-- 循环章节列表 start -->
					<div v-for="(activity, index) in catalogueData">
					<el-timeline-item
						:key="index"
						type="primary"
						:size="activity.children&&activity.children.length?'large':'normal'"
						:hollow="activity.children&&activity.children.length"
					>
						<div class="chapter-parent-item" >
							{{ activity.catalogueText }}
						</div>
					</el-timeline-item>
					<!-- 子节点 start -->
					<el-timeline-item
						v-for="(act,childrenIndex) in activity.children"
						:key="index"
					>
						<div class="chapter-son-item" @click="openRouterWindow(act.id)">
							{{ act.catalogueText }}
							<el-icon :size="20"><video-play /></el-icon>
						</div>
					</el-timeline-item>
					<!-- 子节点 end -->
					</div>
					<!-- 循环章节列表 end -->
				</el-timeline>
			</div>
		</el-card>
	</div>
	<!-- 章节目录 end -->
	<!-- 右边通知 start -->
	<div class="notice">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>课程通知</span>
				</div>
			</template>
			<div class="notice-info-box">
				<div class="notice-item-box" v-for="item in noticeList">
					<ul>
						<li><p style="font-weight: bold;">{{ item.title }}</p>
							<p style="font-size: 10px">{{getDateSting(item.createTime)}}</p>
							<p>{{ item.content }}</p></li>
					</ul>
				</div>
			</div>
		</el-card>
	</div>
	<!-- 右边通知 end -->
</div>
<!-- 最外面容器 start -->
</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage } from "element-plus";
import DateUtils from "@/utils/DateUtils";

export default {
	name: "StudentICourseInfoChapter",
	data(){
		return {
			/**
			 * 学员登录数据
			 */
			studentInfoData:this.$store.state.studentInfoData,
			/**
			 * 课程的章节信息
			 */
			catalogueData:[],
			/**
			 * 课程的通知信息
			 */
			noticeList:[],
		}
	},
	methods:{
		getDateSting(date) {
			return DateUtils.getDateSting(date);
		},
		openRouterWindow(id){
			// 获取数据 这个目录下的资源
			axios.get(ipconfig.address+"/file/resourceList/"+id).then((response)=>{
				if(response.data.code==200){

					// 有数据才跳转
					if(response.data.data.length>0){
						console.log(response.data.data)
						const { href } = this.$router.resolve({
							name: "Video",
							query: {
								id: id
							}
						});
						window.open(href, '_blank');
					}else{
						ElMessage.warning("该章节下没有资源");
					}


				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
				console.log(error);
			});

		},
	},
	mounted() {
		// 获取章节信息
		axios.get(ipconfig.address + "/catalogue/catalogueList/"
			+ this.studentInfoData.thisEditCourse.id + "?state=1&studentId="
			+this.studentInfoData.loginInfo.id).then((response) => {
			if (response.data.code == 200) {
				this.catalogueData = response.data.data;
				ElMessage.success(response.data.message);
			} else {
				ElMessage.warning(response.data.message);
			}
		}).catch((error) => {
			console.log(error);
		});
		// 在这获取当前课程的通知列表
		axios.get(ipconfig.address+"/notice/noticeList?courseId="
			+this.studentInfoData.thisEditCourse.id).then((response)=>{
			if(response.data.code==200){
				this.noticeList=response.data.data;
				console.log(response.data.data)
				ElMessage.success(response.data.message);
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
	}

}
</script>

<style lang="scss" scoped>
.chapter-box{
	width: 100%;
	display:flex;
	justify-content: space-between;

	.chapter{
		margin-top: 10px;
		width: 73%;
		background: #ffffff;
	}
	.notice{
		width: 25%;

		.notice-info-box{
			width: 100%;

			.notice-item-box{
				border-bottom: 2px solid #EEEEEE;
				padding-left: 20px;
				margin-bottom: 20px;
			}
		}
	}

}

.chapter-parent-item{
	font-size: large;
}
.chapter-son-item{
	padding-right: 50px;
	display: flex;
	justify-content: space-between;

	&:hover{
		cursor: pointer;
		color: #F8232B;
	}
}
</style>